<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="js/test.js"></script>
		<style>
			.d {
				width: 500px;
				height: 500px;
			}
			
			button {
				width: 100px;
				height: 30px;
			}
		</style>
		<script type="text/javascript">
			function t() {
				//思路：1.首先找到要删除的节点；2. 找到它的父节点，在父节点的角度删除子节点
				var nodeul = document.getElementsByTagName('ul')[0]; //找到父节点
				var li_lan = nodeul.children[0]; //找到要删除的子节点
				nodeul.removeChild(li_lan); //使用removeChild()函数删除
			}
			$(function() { //主函数
				init();
				var table = document.getElementById("aqi-table");
				var btn1 = document.getElementById("btn1");
				btn1.onclick = function(){
					//alert(table.children[1]);
					//alert(table.children[0]);
					//var ta1=table.children[1];
					alert(table.children[0].nodeType);
					//table.removeChild(); //能删除节点但没有刷新html
				}
			}); //主函数结束
		</script>
	</head>

	<body>
		<div class="d">
			<button id="btn1"></button>
			<table id="aqi-table" border="1">
				<tr>
					<td>城市</td>
					<td>空气质量</td>
					<td>操作</td>
				</tr>
				<tr>
					<td>北京</td>
					<td>90</td>
					<td><button>删除</button></td>
				</tr>
				<tr>
					<td>北京</td>
					<td>90</td>
					<td><button>删除</button></td>
				</tr>

			</table>

			<div id="container">
				<ul>
					<li>春天</li>
					<li>夏天</li>
					<li>蓝天</li>
					<li>秋天</li>
					<li>冬天</li>
				</ul>
			</div>
			<div id="copyul">
			</div>
			<hr />
			<button onclick="t()" value="">删除一个子节点</button>
		</div>
	</body>
	<script>
	</script>

</html>